<template>
    <div class="fifth">
        <div class="fifth-head">
            <h5 class="head1-h5">近七日处理数据</h5>
        </div>
        <div id="chart2" style="width:100%;height:216.5px;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [
                { name: '服务器' },
                { name: '软件' },
                { name: '网关' },
                { name: '桌面终端' },
                { name: '其他' }
            ],
            count: []
        }
    },
    mounted() {
        let request = this.arr.map((v) => {
            return this.$axios({
                url: `/workload`,
                method: 'get',
                params: {
                    type: v.name
                }
            })
        })
        Promise.all(request).then((response) => {
            response.forEach(({ data }) => {
                if (data) {
                    this.count.push({ value: data.length, name: data[0].type })
                }
            })
            console.log(this.count)
            var chartDom = document.getElementById('chart2');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '22%',
                    right: '5%',
                    orient: 'vertical'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.count
                    }
                ]
            };

            option && myChart.setOption(option);

        })
    }
}
</script>

<style lang="less" scoped>
.fifth {
    width: calc((100% - 532px) / 3);
    height: 257.5px;
    background: white;
    position: absolute;
    box-shadow: 0px 3px 6px 0px #E1E1E1;
    top: 277.5px;
    left: 508px;

    .fifth-head {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #EBEEF5;

        .head1-h5 {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
        }
    }
}
</style>